<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Brian Gardner</title>
	<atom:link href="http://briangardner.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://briangardner.com</link>
	<description>Designer, Believer in Simplicity</description>
	<lastBuildDate>Mon, 12 Jan 2026 01:21:46 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0-RC2</generator>

<image>
	<url>https://briangardner.com/wp-content/uploads/brian-gardner.jpg</url>
	<title>Brian Gardner</title>
	<link>https://briangardner.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Powder 2.0, a new design foundation</title>
		<link>https://briangardner.com/powder-2-0/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Sat, 03 Jan 2026 16:23:11 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=187</guid>

					<description><![CDATA[The next chapter of Powder is here. Powder 2.0 is now available—an evolution of minimalism where restraint creates freedom and every detail matters. More than a WordPress block theme, Powder is a foundation for expression, created for designers and agencies delivering real client work. It began with simplicity. Now it makes room for character, confidence, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">The next chapter of Powder is here.</p>



<p class="wp-block-paragraph">Powder 2.0 is now available—an evolution of minimalism where restraint creates freedom and every detail matters. More than a WordPress block theme, Powder is a foundation for expression, created for designers and agencies delivering real client work. It began with simplicity. Now it makes room for character, confidence, and soul.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">For designers and agencies</h2>



<p class="wp-block-paragraph">Powder 2.0 is unapologetically built for designers and agencies.</p>



<p class="wp-block-paragraph">Every decision in this release favors professional workflows: clearer constraints, stronger defaults, and systems that hold up across multiple projects and clients. This isn’t a theme designed to satisfy every use case. It’s designed to support people who build for others—and need consistency, speed, and confidence at scale.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Google Sans</h2>



<p class="wp-block-paragraph">Powder 2.0 introduces <a href="https://fonts.google.com/specimen/Google+Sans+Flex" target="_blank" rel="noreferrer noopener">Google Sans</a> as its core typeface.</p>



<p class="wp-block-paragraph">This was a deliberate choice. Google Sans brings clarity, warmth, and quiet authority—neutral without being sterile, modern without chasing trends. Used well, it disappears. Used intentionally, it elevates.</p>



<p class="wp-block-paragraph">To support more expressive work, Powder 2.0 also includes <strong>Condensed</strong> and <strong>Expanded</strong> widths—practical tools for tighter headlines, stronger hierarchy, and subtle contrast without introducing additional typefaces.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Simplified color palette</h2>



<p class="wp-block-paragraph">Powder 2.0 includes a tailored <a href="https://powder.design/docs/theme-colors/" target="_blank" rel="noreferrer noopener">color palette</a>.</p>



<p class="wp-block-paragraph">The Tailwind-inspired palettes from the 1.x line have been removed. While flexible, they encouraged excess choice and inconsistent outcomes. This tradeoff is intentional: fewer, considered colors reduce decision fatigue, improve cohesion, and speed execution in projects.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Powder Pro pattern library</h2>



<p class="wp-block-paragraph">Non-functional <a href="https://powder.design/patterns/" data-type="link" data-id="https://powder.design/patterns/" target="_blank" rel="noreferrer noopener">block patterns</a> are now handled through a dedicated plugin, <strong>Powder Pro</strong>, keeping the core theme focused.</p>



<p class="wp-block-paragraph">This separation is intentional. Powder remains the foundation—lean, opinionated, and stable. Powder Pro serves as an extension layer, delivering an extensive library of client-ready patterns without bloating the base theme or making assumptions about industry or use case.</p>



<p class="wp-block-paragraph">For designers and agencies, this structure is optimal. The theme stays clean. Patterns become modular. Updates are clearer. And the system scales—across projects, clients, and verticals—without compromise.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">A technical note</h2>



<p class="wp-block-paragraph">Powder 2.0 represents a new foundation for the theme.</p>



<p class="wp-block-paragraph">This release is not an iteration on the 1.x line. It is a reset, intentionally built to support a more opinionated design direction, cleaner architecture, and a tighter baseline for future work.</p>



<p class="wp-block-paragraph">If you’ve used Powder before, this will feel familiar—but more focused. If you’re new, this is the starting point: <a href="https://powder.design/" target="_blank" rel="noreferrer noopener">Powder 2.0 is available now</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>The case for Place Authority</title>
		<link>https://briangardner.com/place-authority/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Wed, 31 Dec 2025 02:47:20 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=172</guid>

					<description><![CDATA[Real estate is an industry I’ve been interested in serving for many years—not because of the transaction itself, but because of how deeply place shapes identity, aspiration, and decision-making. Over time, one shift has become increasingly clear to me: real estate discovery has moved upstream. Buyers aren’t starting with listings or agent outreach anymore. They’re [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Real estate is an industry I’ve been interested in serving for many years—not because of the transaction itself, but because of how deeply place shapes identity, aspiration, and decision-making.</p>



<p class="wp-block-paragraph">Over time, one shift has become increasingly clear to me: <strong>real estate discovery has moved upstream</strong>.</p>



<p class="wp-block-paragraph">Buyers aren’t starting with listings or agent outreach anymore. They’re forming opinions earlier—about neighborhoods, lifestyles, and trade-offs—through research that shapes how they think about place. By the time buyers reach out, much of the decision-making is already complete.</p>



<p class="wp-block-paragraph">What’s striking is how little most real estate advice reflects this reality.</p>



<p class="wp-block-paragraph">Much of the industry still emphasizes platforms, funnels, and short-term lead tactics—approaches designed for a world where discovery happened late. In that world, visibility was enough. Show up at the right moment, capture the lead, and compete on responsiveness.</p>



<p class="wp-block-paragraph">That’s not how buyers decide anymore.</p>



<p class="wp-block-paragraph">Today, trust, influence, and relevance are established well before contact. Authority around place develops through perspective—ideas and explanations that help people understand where they want to live and why, not just what’s available.</p>



<p class="wp-block-paragraph"><a href="https://placeauthority.com/" target="_blank" rel="noreferrer noopener">Place Authority</a> is my way of thinking more carefully about that shift.</p>



<p class="wp-block-paragraph">It’s not about hacks, scripts, or quick wins. It’s about understanding how authority over place is evolving now—and what that requires of agents and teams who want to remain effective as buyer behavior changes.</p>



<p class="wp-block-paragraph">This work is still early. But the shift itself feels unavoidable.</p>



<p class="wp-block-paragraph">If this concept resonates, you can learn more <a href="https://placeauthority.com/about/" target="_blank" rel="noreferrer noopener">about Place Authority</a> or explore the growing set of <a href="https://placeauthority.com/places/" data-type="link" data-id="https://placeauthority.com/places/" target="_blank" rel="noreferrer noopener">place overviews</a> where it’s applied.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Google Sans, the open source font now available</title>
		<link>https://briangardner.com/google-sans-font/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Sun, 23 Nov 2025 04:04:43 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=151</guid>

					<description><![CDATA[Google Sans has been one of those typefaces designers chased for years. It carried that clean, confident geometry but sat behind Google’s brand system, unavailable to anyone building their own themes. As a WordPress theme designer, I’ve wanted it countless times, and now it’s finally possible. Google has released Google Sans as an open-source font, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="1200" height="1200" src="https://briangardner.com/wp-content/uploads/google-sans-font.png" alt="Type example of Google Sans Flex font" class="wp-image-152"/></figure>



<p class="wp-block-paragraph"><a href="https://fonts.google.com/specimen/Google+Sans+Flex" target="_blank" rel="noreferrer noopener">Google Sans</a> has been one of those typefaces designers chased for years. It carried that clean, confident geometry but sat behind Google’s brand system, unavailable to anyone building their own themes.</p>



<p class="wp-block-paragraph">As a WordPress theme designer, I’ve wanted it countless times, and now it’s finally possible. Google has released Google Sans as an open-source font, allowing users to install it in any WordPress block theme without licensing friction.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">A modern typeface with real character</h2>



<p class="wp-block-paragraph">What makes this meaningful is the tone of the font. Google Sans blends geometric structure with a warm humanist feel, giving it a polished look that works across headings, UI elements, and long-form content.</p>



<p class="wp-block-paragraph">The new variable version offers a full range of weights and subtle adjustments, making it more flexible than most free sans-serif options.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Big news for WordPress theme designers</h2>



<p class="wp-block-paragraph">For those of us shaping typography inside the block editor, this is a welcome addition. We’ve leaned on Inter, Source Sans, and system stacks for neutrality and performance.</p>



<p class="wp-block-paragraph">Google Sans introduces a more distinctive voice while staying clean and readable. It opens the door to fresh design in modern WordPress themes and gives me more room to play with type in a way that feels good.</p>



<p class="wp-block-paragraph">I’m looking forward to exploring where it fits in my own work and how it can elevate the design systems we build. High-quality typefaces rarely move from proprietary to open source, so this moment is worth noting for anyone working in WordPress design or front-end development.</p>



<p class="wp-block-paragraph"><a href="https://fonts.google.com/specimen/Google+Sans+Flex">Click here for more info (and to download) Google Sans font</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Powder in Motion, animation for great design</title>
		<link>https://briangardner.com/powder-motion/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Sun, 19 Oct 2025 22:39:41 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=140</guid>

					<description><![CDATA[Movement is a part of great design. From the way light shifts across a surface to the rhythm of how content reveals itself, motion quietly guides attention and adds life. Available soon in Powder, this will be part of that conversation, introduced not as spectacle but as refinement. Introducing Motion in Powder Powder now includes [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Movement is a part of great design. From the way light shifts across a surface to the rhythm of how content reveals itself, motion quietly guides attention and adds life. Available soon in <a href="https://powder.design/" target="_blank" rel="noreferrer noopener">Powder</a>, this will be part of that conversation, introduced not as spectacle but as refinement.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Introducing Motion in Powder</h2>



<p class="wp-block-paragraph">Powder now includes <strong>Motion</strong> options directly within the WordPress block editor, allowing designers and developers to enhance their layouts with a light touch. Available for <strong>Group</strong>, <strong>Columns</strong>, <strong>Column</strong>, and <strong>Image</strong> blocks, the new controls make it easy to enable effects such as <em>Fade In</em>, <em>Fade In Up</em>, and <em>Fade In Down</em>—bringing depth and balance to every website.</p>



<figure class="wp-block-image size-full has-custom-border"><img decoding="async" width="1200" height="800" src="https://briangardner.com/wp-content/uploads/powder-motion.png" alt="Motion settings panel in the WordPress block editor for the Powder theme" class="has-border-color has-contrast-border-color wp-image-141" style="border-width:1px"/></figure>



<p class="wp-block-paragraph">Each effect includes settings for <strong>offset</strong>, <strong>duration</strong>, and <strong>distance</strong>, offering precise control over timing and movement. Want elements to rise gently as a visitor scrolls? Increase the distance or slow the duration for a more deliberate reveal. Prefer something crisp and quick? A shorter duration and minimal offset keep movement subtle and efficient, perfectly aligned with the minimalist principles of <a href="https://powder.design/" target="_blank" rel="noreferrer noopener">Powder</a>.</p>



<p class="wp-block-paragraph">What makes Motion distinct is its restraint. It isn’t decorative; it’s purposeful. It’s available for thoughtful designers who see movement as a way to enhance clarity, not steal focus. Every transition feels natural, intentional, and understated, a continuation of the design language that defines the theme itself.</p>



<p class="wp-block-paragraph">Behind the scenes, these effects are powered by efficient CSS and lightweight JavaScript that only load when Motion is enabled. This preserves the simplicity and performance Powder is known for.</p>



<p class="wp-block-paragraph">With this new feature, <a href="https://powder.design/" target="_blank" rel="noreferrer noopener">Powder</a> takes a quiet step forward—reinforcing the values at the core of this powerful theme: <strong>simplicity, purpose, and style.</strong></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Broker Lane, real estate tools designed to win</title>
		<link>https://briangardner.com/broker-lane/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Thu, 07 Aug 2025 05:15:09 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=75</guid>

					<description><![CDATA[After nearly two decades in the WordPress space—building themes, shaping digital experiences, and championing simplicity—I’m finally stepping into a niche I’ve quietly admired for years: real estate. Today, I’m pleased to introduce Broker Lane, a project that lives at the intersection of WordPress, high-end design, and a professional market that, frankly, deserves better than it’s [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">After nearly two decades in the WordPress space—building themes, shaping digital experiences, and championing simplicity—I’m finally stepping into a niche I’ve quietly admired for years: real estate.</p>



<p class="wp-block-paragraph">Today, I’m pleased to introduce <a href="https://brokerlane.com/" target="_blank" rel="noreferrer noopener">Broker Lane</a>, a project that lives at the intersection of WordPress, high-end design, and a professional market that, frankly, deserves better than it’s been given for too long.</p>



<p class="wp-block-paragraph">Real estate websites often miss the mark—they’re clunky, outdated, and bloated with features agents don’t need. I see a clear opportunity to bring thoughtful, refined design to an market that thrives on presentation.</p>



<p class="wp-block-paragraph">At the heart of this project is Broker Lane, a WordPress block theme. It’s lean, elegant, and purpose-built for those who understand the value of a strong first impression—online and off. The future homepage will read:</p>



<p class="wp-block-paragraph"><em>Broker Lane delivers luxury real estate design exclusively for top performers. Crafted for agents and teams who are driven by results — and built to win.</em></p>



<p class="wp-block-paragraph">Broker Lane isn’t just another theme—it’s a platform for real estate professionals to elevate their digital presence with clarity and confidence. The project will eventually grow beyond the theme to include a plugin suite, custom blocks, design services, and marketing tools.</p>



<p class="wp-block-paragraph">For now, this is my starting point. If you’re in real estate—or know someone who is—I’d love for you to follow along. Something exceptional is on the way, and I look forward to sharing more with you soon.</p>



<p class="wp-block-paragraph">Follow <a href="https://x.com/brokerlaneHQ" target="_blank" rel="noreferrer noopener">@brokerlaneHQ</a> on X to watch the vision unfold.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Join the Powder community on Reddit</title>
		<link>https://briangardner.com/powder-community/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Thu, 24 Jul 2025 19:10:47 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=70</guid>

					<description><![CDATA[If you’re using Powder—or considering it—there’s now a dedicated space to connect with others who are building with it. I am pleased to invite you to join the Powder theme community on Reddit: A community for WordPress designers and developers using the Powder block theme. Share tips, find tutorials, and learn how to build stunning, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">If you’re using <a href="https://powder.design/" data-type="link" data-id="https://powder.design/" target="_blank" rel="noreferrer noopener">Powder</a>—or considering it—there’s now a dedicated space to connect with others who are building with it. I am pleased to invite you to join the <a href="https://www.reddit.com/r/PowderTheme/" target="_blank" rel="noreferrer noopener">Powder theme community</a> on Reddit:</p>



<p class="wp-block-paragraph"><em>A community for WordPress designers and developers using the Powder block theme. Share tips, find tutorials, and learn how to build stunning, high-performance websites.</em></p>



<p class="wp-block-paragraph">Powder is the premier block theme for WordPress designers and developers. With an extensive <a href="https://powder.design/patterns/" data-type="link" data-id="https://powder.design/patterns/" target="_blank" rel="noreferrer noopener">pattern library</a>, versatile templates, and tailored <a href="/powder-colors/">color palettes</a>, it helps you move fast and design beautifully.</p>



<p class="wp-block-paragraph">As WordPress continues to evolve with full site editing, Powder provides a modern and efficient workflow. This community aims to support you—whether you’re customizing a client site, testing patterns, or just starting.</p>



<p class="wp-block-paragraph">I’m using this subreddit as an experiment in distribution. With <a href="/simple-seo/">organic SEO</a> in decline, I believe communities are a more meaningful way to connect and support users. Rather than chasing search rankings, I want to invest in conversations, feedback loops, and peer-driven discovery.</p>



<p class="wp-block-paragraph">If you’ve already <a href="https://powder.design/examples/" data-type="link" data-id="https://powder.design/examples/" target="_blank" rel="noreferrer noopener">built something with Powder</a>, I’d love for you to share it. If you’re new, join us to ask questions, get help, and learn how to get the most out of the theme. Let’s create amazing things—together.</p>



<p class="wp-block-paragraph">👉 <a href="https://www.reddit.com/r/PowderTheme/" target="_blank" rel="noreferrer noopener">Join the Powder community on Reddit</a> 👈</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>A simpler life is a better life</title>
		<link>https://briangardner.com/simpler-life/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Sat, 19 Jul 2025 03:45:29 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=65</guid>

					<description><![CDATA[For years, I chased more—more success, more stuff, more noise, more validation, more urgency, distraction. But over time, I realized that more often leads to less: less clarity, less freedom, and less fulfillment. Simplicity changed that. Whether I’m designing a WordPress theme or deciding how I spend my time, I’ve come to believe that simplicity [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">For years, I chased more—more success, more stuff, more noise, more validation, more urgency, distraction. But over time, I realized that more often leads to less: less clarity, less freedom, and less fulfillment.</p>



<p class="wp-block-paragraph">Simplicity changed that.</p>



<p class="wp-block-paragraph">Whether I’m designing a <a href="/themes/">WordPress theme</a> or deciding how I spend my time, I’ve come to believe that simplicity is not just a design principle—it’s a life principle. Clean lines, generous white space, thoughtful restraint.</p>



<p class="wp-block-paragraph">These aren’t just aesthetic choices. They’re values.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Why simplicity matters—in life and design</h2>



<p class="wp-block-paragraph">In design, simplicity guides. It removes friction, reduces overwhelm, and creates space for focus. Strip away the unnecessary, and what remains is intentional and impactful. The same applies to life.</p>



<p class="wp-block-paragraph">A simpler life doesn’t mean giving up ambition. It’s pursuing what matters without distractions that dilute our energy. Fewer obligations, deeper relationships. Less clutter, more calm. Not minimal for <a href="/minimalism/">minimalism</a> sake—but for clarity, purpose, and peace of mind.</p>



<p class="wp-block-paragraph">As a designer, I’m drawn to the quiet confidence of simplicity. As a person, I’ve come to see it as a compass. It helps me stay grounded, make better decisions, and build a life and a business I want.</p>



<p class="wp-block-paragraph">A simpler life is a better life. One with space to think, time to breathe, and freedom to create. That’s the life I’m building—one worth sharing.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>The magic of text-wrap: balance;</title>
		<link>https://briangardner.com/text-balance/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Thu, 17 Jul 2025 13:09:04 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=60</guid>

					<description><![CDATA[Sometimes it’s the little things in design that matter. Joshua Becker of Becoming Minimalist recently asked me to redesign the No Sidebar website—a project grounded in simplicity, whitespace, and clarity. I rediscovered a small but powerful CSS property—text-wrap: balance;—that improves how multi-line text flows. It’s a subtle touch, but one that brought unexpected polish and [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Sometimes it’s the little things in design that matter. Joshua Becker of <a href="https://www.becomingminimalist.com/" target="_blank" rel="noreferrer noopener">Becoming Minimalist</a> recently asked me to redesign the <a href="https://nosidebar.com/" target="_blank" rel="noreferrer noopener">No Sidebar</a> website—a project grounded in simplicity, whitespace, and clarity.</p>



<p class="wp-block-paragraph">I rediscovered a small but powerful CSS property—<mark style="background-color:#f5f5f5" class="has-inline-color">text-wrap: balance;</mark>—that improves how multi-line text flows. It’s a subtle touch, but one that brought unexpected polish and harmony to the final design.</p>



<p class="wp-block-paragraph">This one CSS property helped get me there. By evenly wrapping multi-line text, especially headlines, it removes visual tension and makes things feel more intentional. It’s not flashy, but the difference is noticeable.</p>



<p class="wp-block-paragraph">On a site like No Sidebar—built on simplicity and whitespace—that kind of balance matters. It’s a simple touch, but it brought the design to life.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">The magic of text-wrap: balance;</h2>



<p class="wp-block-paragraph">Here’s an example of what I mean. Before applying any adjustments, headlines with longer titles often broke in awkward places, creating uneven line lengths that felt visually off, especially on narrower screens.</p>



<figure data-wp-context="{&quot;imageId&quot;:&quot;69c5edc55a391&quot;}" data-wp-interactive="core/image" data-wp-key="69c5edc55a391" class="wp-block-image size-full has-custom-border wp-lightbox-container"><img decoding="async" width="1200" height="942" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on--pointerdown="actions.preloadImage" data-wp-on--pointerenter="actions.preloadImageWithDelay" data-wp-on--pointerleave="actions.cancelPreload" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://briangardner.com/wp-content/uploads/no-sidebar-title-no-balance.png" alt="No Sidebar home page screenshot with not balanced title" class="has-border-color has-contrast-border-color wp-image-62" style="border-width:1px"/><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			data-wp-bind--aria-label="state.thisImage.triggerButtonAriaLabel"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.thisImage.buttonRight"
			data-wp-style--top="state.thisImage.buttonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>



<p class="wp-block-paragraph">With <mark style="background-color:#f5f5f5" class="has-inline-color">text-wrap: balance;</mark> applied, the difference is clear. Headlines on the homepage wrap more evenly, creating a cleaner, more intentional, and visually balanced look that aligns perfectly with the No Sidebar aesthetic.</p>



<figure data-wp-context="{&quot;imageId&quot;:&quot;69c5edc55aaa0&quot;}" data-wp-interactive="core/image" data-wp-key="69c5edc55aaa0" class="wp-block-image size-full has-custom-border wp-lightbox-container"><img loading="lazy" decoding="async" width="1200" height="942" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on--pointerdown="actions.preloadImage" data-wp-on--pointerenter="actions.preloadImageWithDelay" data-wp-on--pointerleave="actions.cancelPreload" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://briangardner.com/wp-content/uploads/no-sidebar-title-balance.png" alt="No Sidebar home page screenshot with balanced title" class="has-border-color has-contrast-border-color wp-image-61" style="border-width:1px"/><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			data-wp-bind--aria-label="state.thisImage.triggerButtonAriaLabel"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.thisImage.buttonRight"
			data-wp-style--top="state.thisImage.buttonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>An inside look at Powder color palettes</title>
		<link>https://briangardner.com/powder-colors/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Mon, 14 Jul 2025 13:55:58 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://briangardner.com/?p=50</guid>

					<description><![CDATA[I believe in the power of simplicity and often design in black and white, embracing minimalism. But make no mistake—I’m also a fan of using color every once in a while. That’s why I thoughtfully curated twelve palettes for Powder, each inspired by the system behind Tailwind CSS. Each palette in Powder includes two shades [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">I believe in the power of simplicity and often design in black and white, embracing <a href="/minimalism/">minimalism</a>. But make no mistake—I’m also a fan of using color every once in a while. That’s why I thoughtfully curated <a href="https://powder.design/docs/color-palettes/" data-type="link" data-id="https://powder.design/docs/color-palettes/" target="_blank" rel="noreferrer noopener">twelve palettes</a> for <a href="https://powder.design/" data-type="link" data-id="https://powder.design/">Powder</a>, each inspired by the system behind <a href="https://tailwindcss.com/docs/colors" target="_blank" rel="noreferrer noopener">Tailwind CSS</a>.</p>



<p class="wp-block-paragraph">Each palette in <a href="https://powder.design/" data-type="link" data-id="https://powder.design/" target="_blank" rel="noreferrer noopener">Powder</a> includes two shades of color—300 and 900—mirroring the tonal structure found in Tailwind. The hex codes in Powder are derived from <a href="https://tailwindcss.com/blog/tailwindcss-v4" data-type="link" data-id="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank" rel="noreferrer noopener">Tailwind CSS v4</a>, where I converted the <a href="https://oklch.com/" target="_blank" rel="noreferrer noopener">OKLCH</a> color values to ensure proper contrast and <a href="https://powder.design/accessibility/" data-type="link" data-id="https://powder.design/accessibility/" target="_blank" rel="noreferrer noopener">accessibility</a> across the theme.</p>



<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40)">Powder color palettes</h2>



<p class="wp-block-paragraph">Explore the palettes featured in the Powder WordPress theme:</p>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Violet</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#4d179a;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#4d179a</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#c4b4ff;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#c4b4ff</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Fuchsia</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#721378;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#721378</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#f4a8ff;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#f4a8ff</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Pink</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#861043;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#861043</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#fda5d5;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#fda5d5</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Rose</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#8b0836;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#8b0836</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#ffa1ad;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffa1ad</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Orange</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#7e2a0c;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#7e2a0c</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#ffb86a;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffb86a</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Yellow</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#733e0a;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#733e0a</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#ffdf20;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffdf20</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Lime</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#35530e;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#35530e</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#bbf451;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#bbf451</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Emerald</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#004f3b;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#004f3b</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#5ee9b5;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#5ee9b5</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Teal</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#0b4f4a;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#0b4f4a</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#46ecd5;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#46ecd5</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Cyan</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#104e64;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#104e64</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#53eafd;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#53eafd</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Sky</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#ffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#024a70;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#024a70</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#74d4ff;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#74d4ff</p>
</div>
</div>
</div>



<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-d6a2e8a6 wp-block-group-is-layout-flow">
<h3 class="wp-block-heading">Blue</h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6888b5c8 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-base-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#fffffff</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-contrast-background-color has-background is-layout-flow wp-block-group-is-layout-flow" style="min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#000000</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-border-color has-contrast-border-color has-background is-layout-flow wp-block-group-is-layout-flow" style="border-width:1px;background-color:#1c398e;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#1c398e</p>
</div>



<div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-075756af wp-block-column-is-layout-flow">
<div class="wp-block-group has-background is-layout-flow wp-block-group-is-layout-flow" style="background-color:#8ec5ff;min-height:50px"></div>



<p class="has-text-align-center has-x-small-font-size wp-block-paragraph" style="font-style:normal;font-weight:400">#8ec5ff</p>
</div>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Inter font by Rasmus Andersson</title>
		<link>https://briangardner.com/inter-font/</link>
		
		<dc:creator><![CDATA[Brian Gardner]]></dc:creator>
		<pubDate>Sun, 06 Jul 2025 00:26:10 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<guid isPermaLink="false">https://bgdotcom.wpenginepowered.com/?p=1</guid>

					<description><![CDATA[When I laid my eyes on&#160;Inter, it was love at first sight. It’s simple, serenely beautiful, and the typeface you see everywhere. Created by Rasmus Andersson, Inter is a variable font family carefully crafted and designed for computer screens. There are nine weights, each with italic counterparts—a total of 18 styles. Inter is available as [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">When I laid my eyes on&nbsp;Inter, it was love at first sight. It’s simple, serenely beautiful, and the typeface you see everywhere.</p>



<p class="wp-block-paragraph">Created by <a href="https://twitter.com/rsms" target="_blank" rel="noreferrer noopener">Rasmus Andersson</a>, <a href="https://rsms.me/inter/" target="_blank" rel="noreferrer noopener">Inter</a> is a variable font family carefully crafted and designed for computer screens. There are nine weights, each with italic counterparts—a total of 18 styles.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1200" height="1200" src="https://briangardner.com/wp-content/uploads/inter-font-square.png" alt="Inter font by Rasmus Andersson" class="wp-image-20"/></figure>



<p class="wp-block-paragraph">Inter is available as a <a href="https://rsms.me/inter/#variable" target="_blank" rel="noreferrer noopener">variable font</a>, encompassing all styles in a significantly more compact file size. A variable font is inherently flexible, allowing you to seamlessly blend different weights and italic angles, offering a practically limitless array of variations.</p>



<p class="wp-block-paragraph">Inter, a versatile typeface, comes equipped with numerous OpenType <a href="https://rsms.me/inter/#features" target="_blank" rel="noreferrer noopener">features</a>, enabling customization for functionality and aesthetics to suit your precise requirements. These features offer the flexibility to mix and match, creating unique stylistic variations</p>



<h2 class="wp-block-heading" id="inter-font-free-download" style="margin-top:var(--wp--preset--spacing--40)">Inter Font: Version 4.1</h2>



<p class="wp-block-paragraph">The release of <a href="https://github.com/rsms/inter/releases/tag/v4.1" target="_blank" rel="noreferrer noopener">Inter version 4.1</a> marked a major update, featuring a complete redesign of many glyphs, the introduction of six new &#8220;Display&#8221; designs, and the addition of various OpenType features.</p>



<p class="wp-block-paragraph">It also included technical improvements like a change in the UPM and enhanced metrics. While maintaining some consistency with the previous version, particularly in smaller text sizes, expect to see noticeable differences with this new version.</p>



<h2 class="wp-block-heading" id="inter-font-free-download" style="margin-top:var(--wp--preset--spacing--40)">Inter Font: Free Download</h2>



<p class="wp-block-paragraph">Using Inter is as easy as&nbsp;<a href="https://rsms.me/inter/download/" target="_blank" rel="noreferrer noopener">downloading &amp; installing</a>&nbsp;it. If you want to use Inter on your website, you can get it from&nbsp;<a href="https://fonts.google.com/specimen/Inter" target="_blank" rel="noreferrer noopener">Google Fonts</a>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1200" height="600" src="https://briangardner.com/wp-content/uploads/inter-variable-font.png" alt="Inter variable font by Rasmus Andersson" class="wp-image-21"/></figure>



<h2 class="wp-block-heading" id="inter-font-license" style="margin-top:var(--wp--preset--spacing--40)">Inter Font: License</h2>



<p class="wp-block-paragraph">Inter is licensed under the&nbsp;<a href="https://github.com/rsms/inter/blob/master/LICENSE.txt" target="_blank" rel="noreferrer noopener">SIL Open Font License</a>. You are free to use this font in almost any way imaginable. It can be used freely in your projects—print or digital, commercial or otherwise.</p>



<h2 class="wp-block-heading" id="inter-font-resources" style="margin-top:var(--wp--preset--spacing--40)">Inter Font: Resources</h2>



<p class="wp-block-paragraph">Below is a list of resources you might find helpful about Inter:</p>



<ul class="wp-block-list">
<li><a href="https://news.ycombinator.com/item?id=38340742">The Inter font family version 4.0</a></li>



<li><a href="https://www.figma.com/blog/the-birth-of-inter/" target="_blank" rel="noreferrer noopener">The birth of Inter: How the new open-source typeface used by GitHub and Mozilla came to be</a></li>



<li><a href="https://rsms.me/inter/#story" target="_blank" rel="noreferrer noopener">The story behind Inter</a></li>



<li><a href="https://mozilla.design/firefox/typography/" target="_blank" rel="noreferrer noopener">Typography: Because the internet is mostly made of words</a></li>



<li><a href="https://www.typewolf.com/site-of-the-day/fonts/inter" target="_blank" rel="noreferrer noopener">Inter Font Combinations &amp; Similar Fonts</a></li>
</ul>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
